<template>
    <el-table :data="tableData" stripe style="width: 100%" border @row-click="handleRowClick">
        <el-table-column label="博客动态" align="center">
            <template #default="scope">
                <div class="weibo-card">
                    <!-- 头像及发布者信息区域 -->
                    <div class="weibo-card__header">
                        <div class="avatar-container">
                            <img :src="'/img'+scope.row.tx"  class="weibo-card__avatar" />
                            <span class="weibo-card__nickname">{{ scope.row.nc }}</span>
                        </div>
                        <div class="header-content">
                            <div class="weibo-card__meta">
                                {{ scope.row.time }} 来自 博客网页版
                            </div>
                            <div class="weibo-card__meta">
                                标题# {{ scope.row.title }}
                            </div>
                        </div>
                    </div>

                    <!-- 动态内容区域 -->
                    <div class="weibo-card__content">
                        {{ scope.row.text }}
                        <div class="weibo-card__image" v-if="scope.row.url && scope.row.url.trim()">
                            <img
                                    v-for="(imgUrl, index) in scope.row.url.split(',')"
                                    :key="index"
                                    :src="'/img'+imgUrl.trim()"
                                    class="imgs"
                            />
                        </div>
                      <!-- 视频展示 -->
                      <div class="weibo-card__video" v-if="scope.row.video && scope.row.video.trim()">
                        <video
                            v-for="(videoUrl, index) in scope.row.video.split(',')"
                            :key="'video-'+index"
                            :src="'/img'+videoUrl.trim()"
                            controls
                            class="video-player"
                        >您的浏览器不支持视频播放</video>
                      </div>
                    </div>

                    <!-- 互动按钮区域（含点赞/收藏状态） -->
                    <div class="weibo-card__actions">
            <span class="weibo-card__action">
              <el-icon class="el-icon"><ChatDotRound /></el-icon>
              {{ scope.row.commentCount || 0 }}
            </span>

                        <!-- 点赞按钮（带状态） -->
                        <span class="weibo-card__action" @click="handleLike(scope.row)">
              <el-icon class="el-icon" :class="{ 'liked': scope.row.isLiked }"><Pointer /></el-icon>
              {{ scope.row.likeCount || 0 }}
            </span>

                        <!-- 收藏按钮（带状态） -->
                        <span class="weibo-card__action" @click="handleCollect(scope.row)">
              <el-icon class="el-icon" :class="{ 'collected': scope.row.isCollected }"><StarFilled /></el-icon>
              {{ scope.row.collectCount || 0 }}
            </span>

                        <span class="weibo-card__action">
              <el-icon class="el-icon"><View /></el-icon>
              {{ scope.row.browse || 0 }}
            </span>
                    </div>
                </div>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup lang="ts">
// 脚本部分保持不变（与原代码一致）
import axios from 'axios';
import { ref, onMounted } from 'vue';
import {ChatDotRound, StarFilled, Share, View, Pointer} from '@element-plus/icons-vue';
import router from "../router"
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
const userId = ref(userStore.id)

const tableData = ref([]);

onMounted(() => {
    doList();
    initAllPostStatus();
});

const doList = async () => {
    const { data } = await axios.get('/api/postAndUser/fanId/'+userId.value);
    console.log(data);
    tableData.value = data;
    tableData.value = data.map(post => ({
        ...post,
        isLiked: false,
        isCollected: false,
        isFollowed: false
    }));
    return tableData.value;
};

const initAllPostStatus = async () => {
    if (!userId) return;
    for (const post of tableData.value) {
        await Promise.all([
            getLikeStatus(post),
            getCollectStatus(post),
        ]);
    }
};

const getLikeStatus = async (post) => {
    const postId = post.id;
    if (!postId) return;
    const { data: likeData } = await axios.get(`/api/like/${postId}/${userId}`);
    post.isLiked = !!likeData;
};

const getCollectStatus = async (post) => {
    const postId = post.id;
    if (!postId) return;
    const { data: status } = await axios.get(`/api/collect/status/user/${userId}/post/${postId}`);
    post.isCollected = status;
};

const handleLike = async (post) => {
    const postId = post.id;
    if (!postId || !userId) {
        alert("请先登录");
        return;
    }
    if (post.isLiked) {
        const res = await axios.delete(`/api/like/${postId}/${userId}`);
        if (res.data > 0) {
            post.isLiked = false;
            post.likeCount = (post.likeCount || 0) - 1;
        }
    } else {
        const likeData = {
            postId: postId,
            userId: userId,
            time: new Date().toISOString().replace('T', ' ').slice(0, 19)
        };
        const res = await axios.post('/api/like', likeData);
        if (res.data > 0) {
            post.isLiked = true;
            post.likeCount = (post.likeCount || 0) + 1;
        }
    }
};

const handleCollect = async (post) => {
    const postId = post.id;
    if (!postId || !userId) {
        alert("请先登录");
        return;
    }
    if (post.isCollected) {
        const { data: collectId } = await axios.get(`/api/collect/user/${userId}/post/${postId}`);
        if (!collectId) {
            alert("未找到收藏记录");
            return;
        }
        const res = await axios.delete(`/api/collect/${collectId}`);
        if (res.data > 0) {
            post.isCollected = false;
            post.collectCount = (post.collectCount || 0) - 1;
        }
    } else {
        const collectData = {
            userId: userId,
            postId: postId,
            time: new Date().toISOString().replace('T', ' ').slice(0, 19)
        };
        const res = await axios.post('/api/collect', collectData);
        if (res.data > 0) {
            post.isCollected = true;
            post.collectCount = (post.collectCount || 0) + 1;
        }
    }
};
const handleRowClick = (row) => {
    router.push(`/poster?id=${row.id}`)
}
</script>

<style scoped>
/* 替换为与第二个页面完全一致的样式 */
.weibo-card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.weibo-card__header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.avatar-container {
    display: flex;
    align-items: center;
}

.weibo-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 8px;
}

.weibo-card__nickname {
    font-weight: bold;
    color: #333;
    margin-right: 8px;
}

.header-content {
    display: flex;
    flex-direction: column;
}

.weibo-card__meta {
    font-size: 12px;
    color: #999;
}

.weibo-card__content {
    margin: 8px 0;
    color: #333;
    line-height: 1.6;
}

.weibo-card__image {
    margin-top: 8px;
}
.imgs {
    width: 180px;
    height: 180px;
    margin: 0 2px;
    border-radius: 4px; /* 与第二个页面一致的图片圆角 */
}
.weibo-card__actions {
    display: flex;
    gap: 24px;
    color: #666;
    margin-top: 12px; /* 与第二个页面一致的顶部间距 */
    justify-content: center; /* 按钮区域居中对齐 */
}

.weibo-card__action {
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
    cursor: pointer;
}

.weibo-card__action:hover {
    color: #409eff;
}

.el-icon {
    font-size: 20px;
}

/* 点赞和收藏状态样式（使用::v-deep穿透作用域） */
::v-deep .weibo-card__action .liked {
    color: #ff4d4f; /* 点赞后红色 */
}

::v-deep .weibo-card__action .collected {
    color: #faad14; /* 收藏后金色 */
}
.weibo-card__video {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.video-player {
  max-width: 100%;
  max-height: 400px;
  border-radius: 4px;
  background-color: #000;
  outline: none;
}
</style>